<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#fff" title="券码详情"></nav-bars>
		<view class="wrapBg"
			:style="{background: 'url('+baseImg+'/static/adminShop/detailBack.png'+')',backgroundSize:'100% 100%'}">
			<!-- <image :src="baseImg+'/static/adminShop/detailBack.png'" mode=""></image> -->
		</view>
		<view class="main-box">
			<view class="row-block">
				<view class="top-column" v-if="dateStatus">
					<view class="sidebar_a">
						￥{{prizeInfo.price}}
						<text>{{prizeInfo.prize_name}}</text>
					</view>
					<view class="sidebar_b">
						{{prizeInfo.sub_name}}
					</view>
				</view>
				<view class="top-column active" v-else>
					<view class="sidebar_a">
						<image :src="`${baseImg}/static/adminShop/writeOff/overdue.png`" mode=""></image>
					</view>
					<view class="sidebar_b">
						该券码已过期
					</view>
				</view>
				<view class="row-box">
					<view class="time">
						<text>有效期</text>
						<text class="time-text">{{$utils.getFormatDate(prizeInfo.start_at*1000,'yyyy.MM.dd')}} - {{$utils.getFormatDate(prizeInfo.end_at*1000,'yyyy.MM.dd')}}</text>
					</view>
					<view class="description">
						<view class="title">
							卡券及说明
						</view>
						<view class="row-text">
							<!-- {{prizeInfo.remark}} -->
							<u-parse :html="prizeInfo.remark"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="toScanWriteOff">
				{{dateStatus?'确定核销':'返回首页'}}
			</view>
		</view>
	</view>
</template>

<script>
	import service_writeOff from '@/service/writeOff.js'
	export default {
		data() {
			return {
				baseImg: this.$static,
				navBackground: '',
				prize_code:'',//337BA7567
				prize_id:'',
				prizeInfo:{},
				dateStatus:true,//是否过期,true未过期，false过期
			}
		},
		onLoad(options) {
			console.log(options,'二维码参数')
			this.prize_code = options.prize_code;
			this.prize_id = options.prize_id
			this.getPrizeInfo()
		},
		methods:{
			// 核销详情
			getPrizeInfo(){
				let params = {
					prize_code:this.prize_code,
					prize_id:this.prize_id
				}
				service_writeOff.getPrizeInfo(params).then(res=>{
					console.log(res,'核销奖品信息')
					if(res.code==1){
						this.prizeInfo = res.data?res.data:{};
						let nowDate = new Date()
						if(res.data.end_at){
							if(res.data.end_at*1000 < nowDate.getTime()){
								console.log('过期')
								this.dateStatus = false
							}else{
								console.log('未过期')
								this.dateStatus = true
							}
						}
					}
				})
			},
			
			// 确认核销
			toScanWriteOff(){
				if(this.dateStatus){
					// 未过期
					let sid = this.$store.state.index.sid;
					let userId = this.$store.state.index.userId;
					let params = {
						store_id:sid,
						user_id:userId,
						prize_code:this.prize_code,
						prize_id:this.prize_id
					}
					service_writeOff.scanWriteOff(params).then(res=>{
						console.log(res,'确认核销')
						if(res.code==1){
							uni.navigateTo({
								url:'/pagesFour/activity/writeOff/writeOffResult?type=success'
							})
						}else{
							uni.navigateTo({
								url:`/pagesFour/activity/writeOff/writeOffResult?type=fail&msg=${res.msg}`
							})
						}
					})
				}else{
					uni.reLaunch({
						url:'/pages/mall/newIndex/newIndex'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.wrapBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.main-box {
			width: 100%;
			position: absolute;

			.row-block {
				width: 93.01%;
				position: fixed;
				bottom: 0;
				height: calc(100vh - 190rpx);
				left: 50%;
				transform: translate(-50%, -0%);
				margin: auto;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				z-index: 100;

				.top-column {
					width: 90%;
					margin: auto;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #E0E0E0;
                    padding:46rpx 0 46rpx 20rpx;
					.sidebar_a {
						font-size: 54rpx;
						font-weight: bold;
						color: #CB9436;
						margin-top: 20rpx;
                        text-align: left;
						text {
							text-align: center;
							margin-top: 4rpx;
							width: 100%;
							font-size: 30rpx;
							display: block;
							font-weight: 500;
						}
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}

					.sidebar_b {
						text-indent: 34rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #201B18;
					}
				}
				.active{
					padding:60rpx 0 60rpx 180rpx;
					.sidebar_a{
						margin: 0;
					}
				}

				.row-box {
					width: 94%;
					margin: auto;

					.time {
						padding:42rpx;
						margin-top: 24rpx;

						text {
							line-height: 46rpx;
							width: 100%;
							display: block;
							color: #595959;
						}
						text .time-text {
							font-weight: 500;
							color: #272727;
						}
					}
					.description{
						padding:42rpx;
						.title{
							width: 140rpx;
							height: 42rpx;
							margin-bottom:20rpx;
							font-weight: 500;
							color: #595959;
						}
						.row-text{
							width: 557rpx;
							height: 119rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #272727;
							line-height: 46rpx;
						}
					}
				}
			}
		}
		.footer{
			width: 100%;
			position: fixed;
			bottom:84rpx;
			z-index: 1000;
			.btn{
				width: 608rpx;
				height: 92rpx;
				margin: auto;
				background: linear-gradient(32deg, #EBB964, #E2AD54);
				border-radius: 46rpx;
				text-align: center;
				line-height: 92rpx;
				font-weight: bold;
				color: #FFFFFF;
				
			}
		}
	}
</style>
